<template>
	<view>
		<view class="topbox">
			<view class=""
				style="background-color: #fff;display: flex;border-radius: 40rpx;padding: 15rpx;justify-content: space-between;align-items: center;">
				<input type="text" placeholder="请输入患者姓名/手机号" style="margin-left: 20rpx;" v-model="keywords"  @input="getdata"/>
				<image src="../../static/myGroup/suosou.png" mode=""
					style="width: 40rpx;height:40rpx;margin-right: 20rpx;"></image>
			</view>
			<view class="cds">
				<view :class="nav_index == 0 ? 'choice' : ''" @click="changenav(0)">
					全部
				</view>
				<view :class="nav_index == 1 ? 'choice' : ''" @click="changenav(1)">
					待支付
				</view>
				<view :class="nav_index == 2 ? 'choice' : ''" @click="changenav(2)">
					检测中
				</view>
				<view :class="nav_index == 3 ? 'choice' : ''" @click="changenav(3)">
					已完成
				</view>
			</view>
		</view>

		<view class="" style="margin-top: 10px;" v-if="datalist.length > 0">
			<view class=""
				style="padding: 30rpx;box-shadow: 1px 1px 4px 1px #ccc;width: 85%;margin: 0px auto;border-radius: 20rpx;margin-top: 20rpx;"
				v-for="(item,index) in datalist" @click="godetail(item.id)">
				<view class="" style="color: #ff0000;font-size: 28rpx;margin-bottom: 15rpx;" v-if="item.status == 2 && item.tips != ''">
					{{item.tips}}
				</view>
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<view class="">
						患者：{{item.username}}（{{item.usertel}}）
					</view>
					<view class="" style="font-size: 30rpx;">
						<!-- 待支付 -->
						<text v-if="item.status == 2">
							<text>已支付</text>
							<text v-if="item.abnormal == 1" style="color: red;">(检测异常)</text>
							<text v-else-if="item.detection_status == 1" style="color: green;">(检测中)</text>
							<text v-else-if="item.detection_status == 0" style="color: orange;">(未检测)</text>
						</text>
						<text v-if="item.status == 1">
							<text>待支付</text>
						</text>
						<text v-if="item.status == 3">
							<text style="color: green;">已完成</text>
						</text>
						<text v-if="item.status == 4">
							<text style="color: red;">已取消</text>
						</text>
						<!-- {{item.status == 1 ? '待支付' : item.status == 2 ? '检测中' : item.status == 3 ? '已完成' : '已取消'}} -->
					</view>
				</view>
				<view class=""
					style="display: flex;justify-content: space-between;align-items: center;font-size: 24rpx;color: #9e9e9e;margin-top: 20rpx;">
					<view class="">
						单号：{{item.order_id}}
					</view>
					<view class="">
						{{item.createtime}}
					</view>
				</view>
				<view class="xian"></view>
		
				<view class="" style="display: flex;justify-content: space-between;align-items: center;"
					v-for="(it,id) in item.items">
					<view class="" style="display: flex;flex-direction: column;">
						<view class="">
							{{id+1}}、{{it.name}}
						</view>
						<view class="" style="margin-left: 40rpx;color: #9e9e9e;font-size: 30rpx;margin-top: 5rpx;"
							v-for="(ss,aa) in it.sonitem">
							<span v-if="ss.device_type == 3">
								请前往详情查看
							</span>
							<span v-else>
								{{ss.ssued}}:{{ss.result_data != '' && ss.result_data != null ? ss.result_data : ''}} 
							</span>
							
							<span v-if="ss.abnormal == 0" :style="{'color':ss.status == 3 ? 'green' : 'red'}">({{ss.status == 3 ? '已检测' : '未检测'}})</span>
							<span v-else style="color: red;">(检测异常)</span>
						</view>
					</view>
					<view class="">
						￥{{it.price}}
					</view>
				</view>
				<view class=""
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="">
		
					</view>
					<view class="" style="color: red;">
						合计:￥{{item.pay_money}}
					</view>
				</view>
				<view class="xian" v-if="item.pay_status == 0"></view>
				<view class="" v-if="item.pay_status == 0"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					
				</view>
				<view class="" v-if="item.pay_status == 1 && item.status < 3"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="">
		
					</view>
				
				</view>
				<!-- @click="pay_order(item.id)" -->
				<!-- <view class="" v-if="item.pay_status == 0" @tap.stop="get_code(item.id)"
					style="display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;">
					<view class="btn_c">
						患者支付
					</view>
				</view> -->
			</view>
		</view>
		<view class="ccc" v-else>
			<image src="../../static/incomeDetail/wushiju.png" mode="" style="width: 100%;height: 100%"></image>
		</view>
	</view>
</template>

<script>
	var md5 = require('../../components/md5.js')
	export default {
		data() { 
			return {
				nav_index: 0,
				datalist: [],
				keywords:''
			}
		},
		onShow() {
			console.log('患者TOKEN'+uni.getStorageSync('hz_token'))
			if(!uni.getStorageSync('hz_token')){
				// 让他去登录
				uni.switchTab({
					url:'/pages/login/login'
				})
			}else{
				this.getdata()
			}
			
		},
		methods: {
			godetail(id) {
				uni.navigateTo({
					url: '/pages/checkorder/orderdetail?id=' + id
				})
			},
			pay_order(id){
				let that = this
				console.log('请求的status',that.nav_index)
				uni.showLoading({
					title:"加载中"
				})
				uni.request({
					url: that.global.url + 'api/device/order_pay_wx',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {
						id: id,
						identity: 4
					},
					success(res) {
						let result = res.data
						
						console.log(result)
						if (result.code == 1) {
							if(result.data.need_pay == 1){
								
									
									let pay_key = result.data.pay_key
									
									// return false;
									//obj里面的key一定要是驼峰名称
									let obj = {
										appId: result.data.payinfo.appid,
										nonceStr: result.data.payinfo.noncestr,
										package: "prepay_id=" + result.data.payinfo.package,
										signType: 'MD5',
										timeStamp: result.data.payinfo.timestamp
									}
									//参数名ASCII码从小到大排序（字典序）
									let arr = Object.keys(obj).sort().map(item => {
										return `${item}=${obj[item]}`;
									});
									//最后拼接上key（商户密钥）得到字符串
									let str = arr.join('&') + '&key=' + pay_key;
									console.log(str);
									//对str进行MD5运算，再将得到的字符串所有字符转换为大写
									console.log(result.data.payinfo.timestamp)
									let paySign = md5.hexMD5(str).toUpperCase()
									wx.requestPayment({
										timeStamp: result.data.payinfo.timestamp.toString(),
										nonceStr: result.data.payinfo.noncestr,
										package: "prepay_id=" + result.data.payinfo.package,
										signType: 'MD5',
										paySign: paySign,
										success: function(res) {
											// 支付成功
											uni.showModal({
												title: '提示',
												content: '支付成功',
												showCancel: false,
												success: function(res) {
													if (res.confirm) {
														// uni.navigateBack({
														// 	delta: 2
														// })
														uni.redirectTo({
															url:'/pages/checkorder/myorder'
														})
													}
												}
											})
										},
										fail: function(res) {
											// 支付失败
											console.log(res)
											uni.showToast({
												title: '支付失败',
												icon: 'none'
											})
										}
									})
								} else {
									uni.showModal({
										title: '提示',
										content: '支付成功',
										showCancel: false,
										success: function(res) {
											that.datalist = []
											that.getdata()
										}
									})
								}
							}else{
								uni.showToast({
									title: result.msg,
									icon: 'none'
								})
								
							}
							
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			getdata() {
				let that = this
				console.log('请求的status',that.nav_index)
				uni.showLoading({
					title:"加载中"
				})
				uni.request({
					url: that.global.url + 'api/device/myorder',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('hz_token')
					},
					data: {
						status: that.nav_index,
						keyword:that.keywords
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							// 存用户信息
							that.datalist = result.data
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'none'
							})
						}
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			canceorder(id) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							uni.showLoading({
								title:'加载中'
							})
							uni.request({
								url: that.global.url + 'api/device/cance_order',
								method: 'POST',
								header: {
									'token': uni.getStorageSync('hz_token')
								},
								data: {
									id: id
								},
								success(res) {
									let result = res.data
									console.log(result)
									if (result.code == 1) {
										// 存用户信息
										uni.showToast({
											title: result.msg,
											icon: 'none'
										})
										setTimeout(() => {
											that.getdata()
										}, 1000)
										that.getdata()
									} else {
										uni.showToast({
											title: result.msg,
											icon: 'none'
										})
									}
								},
								complete() {
									uni.hideLoading()
								}
							})
						} else {
							// 执行取消后的操作
						}
					}
				})


			},
			changenav(index) {
				this.nav_index = index
				this.getdata()
			}
		}
	}
</script>

<style>
	.topbox {
		padding: 30rpx;
		background-color: #1262DB;
	}

	.choice {
		color: #fff;
		font-weight: bold;
		border-bottom: 2px solid #fff;
		padding-bottom: 10rpx;
	}

	.cds {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 0px auto;
		margin-top: 15px;
		color: #a7bbed;
		width: 93%;
	}
	.ccc{
		    width: 30%;
		    height: 227rpx;
		    margin: 0px auto;
		    margin-top: 30%;
	}
	.xian {
		border-bottom: 1px solid #e2e2e2;
		margin: 30rpx 0rpx;
	}

	.btn_b {
		border: 2px solid #1262DB;
		padding: 10rpx 20rpx;
		color: #1262DB;
		font-size: 28rpx;
		border-radius: 15rpx;
	}

	.btn_c {
		background: #1262DB;
		color: #fff;
		width: 100%;
		padding: 20rpx;
		text-align: center;
		margin-top: 15rpx;
		border-radius: 15rpx;
	}
</style>